<template>
  <div class="hd">
    <div class="hd mt10">
      <img src="../../assets/banner.png" alt="">
    </div>
    <mall-bar :showsearch="true" :activeitem="0" ></mall-bar><!--@search="searchHandle"-->
    <!-- <position>
      <router-link to="/mall">药品信息</router-link>
      &gt;
      <span class="last">药品列表</span>
    </position> -->
    <router-view></router-view>
  </div>
</template>

<script>
import MallBar from '../../components/MallBar'
import Position from '../../components/Position'
import {commonAjax, PLATFORM_PREFIX} from '../../api/api'
export default {
  components: {MallBar, Position},
  
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.common-title {
  padding: 20px;
  border-bottom: 2px solid #FCF6F2;
  overflow: hidden;
  .main {
    float: left;
    color: @color-primary;
    font-size: 1.2em;
  }
  .sub {
    float: left;
    margin-left: 80px;
    margin-top: 12px;
    color: #666;
    font-size: 14px;
    .iconfont {font-size: 12px;}
    dt , dd{float: left;margin-left: 20px;cursor: pointer;}
  }
}
.product-list{
  overflow: hidden;
  margin-right: -30px;
  >.product-list-item {
    position: relative;
    float: left;
    width: 244px;
    margin-left: 20px;
    margin-top: 20px;
    border: 1px solid @color-border;
    padding: 10px;
    transition: all .5s;
    cursor: pointer;
    .white-block {
      background: #fff;
      height: 60px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
    &:hover{
      border-color: #EAD0C3;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .product-img > img {
      width: 224px;
      height: 224px;
    }
    .product-title {
      height: 40px;
      overflow: hidden;
    }
    // .product-detail {
    //   font-size: 12px;
    //   margin: 2px 0; 
    // }
    .product-money {
      font-size: 1.4em;
      color: @color-price;
    }
  }
}
</style>
